<template>
	<view class="page">
		<view class="head">
			<c-navBar color="#FFFFFF" title="个人中心" isPerch isTran isBack></c-navBar>
			<image class="in_check_bg" src="/static/tabbar/in_check_bg.png" mode=""></image>
			<view class="user">
				<view class="info">
					<image class="header-img" v-if="userInfo.avatar" :src="vuex_imgUrl+userInfo.avatar" />
					<image class="header-img" v-else src="/static/common/header-img.png" />
					<view class="name" v-if="vuex_token">{{ userInfo.nickname || '用户名' }}</view>
					<view class="name" v-else>未登录</view>
				</view>
				<image @click="$fn.jumpPage('/pages/my/pages/information')" class="vector"
					src="/static/tabbar/vector.png" mode=""></image>
			</view>
		</view>

		<view class="list" v-if="vuex_token">
			<view class="list_item" v-for="(v,i) in opList" :key="i"
				v-if="v.title !== '我是鉴定师' || (userInfo.type === 1 || userInfo.type === 2)" @click="goPage(v.url)">
				<view class="item_l">
					<image class="list_icon" :src="v.icon" mode="" />
					<view class="list_title">{{ v.title }}</view>
				</view>
				<view class="version" v-if="v.title === '版本号'">{{ vuex_version }}</view>
				<u-icon name="arrow-right" v-else color="#999" size="28rpx" />
			</view>
		</view>
		<view class="list" v-else>
			<view class="list_item" v-for="(v,i) in opList1" :key="i"
				v-if="v.title !== '我是鉴定师' || (userInfo.type === 1 || userInfo.type === 2)" @click="goPage(v.url)">
				<view class="item_l">
					<image class="list_icon" :src="v.icon" mode="" />
					<view class="list_title">{{ v.title }}</view>
				</view>
				<view class="version" v-if="v.title === '版本号'">{{ vuex_version }}</view>
				<u-icon name="arrow-right" v-else color="#999" size="28rpx" />
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo: {},


				opList: [{
					icon: '/static/tabbar/mine-op1.png',
					title: '鉴定师入口',
					url: '/pages/appraiser/pages/workTable'
				}, {
					icon: '/static/tabbar/mine-op2.png',
					title: '联系我们',
					url: '/pages/my/pages/service'
				}, {
					icon: '/static/tabbar/mine-op3.png',
					title: '修改密码',
					url: '/pages/my/pages/changePass'
				}, {
					icon: '/static/tabbar/mine-op4.png',
					title: '修改手机号码',
					url: '/pages/my/pages/verifyPhoneNumber'
				}, {
					icon: '/static/tabbar/mine-op5.png',
					title: '用户协议',
					url: '/pages/tabbar/agreement?type=1'
				}, {
					icon: '/static/tabbar/mine-op6.png',
					title: '隐私协议',
					url: '/pages/tabbar/agreement?type=2'
				}, {
					icon: '/static/tabbar/mine-op7.png',
					title: '版本号',
					url: ''
				}, {
					icon: '/static/tabbar/mine-op8.png',
					title: '退出登录',
					url: '/pages/tabbar/appLogin'
				}, {
					icon: '/static/tabbar/mine-op8.png',
					title: '注销账号',
					url: '/pages/tabbar/appLogin'
				}],

				opList1: [{
					icon: '/static/tabbar/mine-op1.png',
					title: '我是鉴定师',
					url: '/pages/appraiser/pages/workTable'
				}, {
					icon: '/static/tabbar/mine-op2.png',
					title: '联系我们',
					url: '/pages/my/pages/service'
				}, {
					icon: '/static/tabbar/mine-op5.png',
					title: '用户协议',
					url: '/pages/tabbar/agreement?type=1'
				}, {
					icon: '/static/tabbar/mine-op6.png',
					title: '隐私协议',
					url: '/pages/tabbar/agreement?type=2'
				}, {
					icon: '/static/tabbar/mine-op7.png',
					title: '版本号',
					url: ''
				}, {
					icon: '/static/tabbar/mine-op8.png',
					title: '去登录',
					url: '/pages/tabbar/appLogin'
				}]
			}
		},
		onLoad() {},
		onShow() {
			this.getUserInfo()
		},
		methods: {
			// 跳转页面
			goPage(url) {
				console.log(url, '跳转路径');
				if (url == '/pages/tabbar/appLogin') {
					uni.removeStorageSync('token') //清除token
					uni.removeStorageSync('lifeData') //清除用户信息
					return uni.reLaunch({
						url
					})
				} else if (url == '/pages/appraiser/pages/workTable') {
					return uni.reLaunch({
						url
					})
				} else if (url) {
					uni.navigateTo({
						url
					})
				}
			},
			getUserInfo() {
				if (!this.vuex_token) return
				this.$api.getUserInfo().then(res => {
					console.log(res, '用户信息')
					this.userInfo = res.data
				})
			}

		}
	}
</script>

<style lang="scss" scoped>
	.head {
		width: 750rpx;
		height: 416rpx;
		background: linear-gradient(180deg, #000000 0%, #4D4D4D 100%);
		position: relative;

		.in_check_bg {
			width: 750rpx;
			height: 172rpx;
			margin-top: 60rpx;
		}

		.user {
			width: 100%;
			position: absolute;
			top: 250rpx;
			padding: 0 40rpx;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.info {
				display: flex;
				align-items: center;
				gap: 32rpx;

				.header-img {
					width: 120rpx;
					height: 120rpx;
					border-radius: 8rpx;
				}

				.name {
					font-weight: bold;
					font-size: 40rpx;
					color: #FFFFFF;
				}

			}

			.vector {
				width: 36rpx;
				height: 36rpx;
			}

		}
	}

	.list {
		width: 750rpx;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 0 0;
		padding: 0 32rpx;
		box-sizing: border-box;
		margin: 0rpx auto 0;
		position: relative;


		.list_item {
			padding: 32rpx 0;
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: 1rpx solid #E6E6E6;

			.version {
				font-weight: 400;
				font-size: 24rpx;
				color: #666666;
			}


			.item_l {
				display: flex;
				align-items: center;
				gap: 18rpx;

				.list_icon {
					width: 32rpx;
					height: 32rpx;
				}

				.list_title {
					font-size: 32rpx;
					color: #333333;
					line-height: 38rpx;
				}

			}

		}

	}
</style>